<template>
  <div class="card-add-friend-main">
    <div class="card-add-friend-head">
      <div class="head-title">
        名片加好友
        <span class="example-text" @click="handleOpen">示例1</span>
        <div class="example-modal">
          <img class="example-cover" src="@/assets/images/pic_add_friend_example.png" />
        </div>
      </div>
      <img class="divider" src="@/assets/images/divider.png" />
    </div>
    <div class="card-add-friend-container">
      <div class="config-tips">
        <el-alert
          type="warning"
          show-icon>
          <div slot="title" style="font-size: 14px;line-height: 22px;color: rgba(0,0,0,.85);">
            如需单个企微号配置、查看任务执行详情、进行部分客户或部分成员的配置，请前往“<a style="color: #3070ff;">单号配置</a>”
          </div>
        </el-alert>
      </div>
      <div class="table-container">
        <div class="flexbetween mb-12">
          <el-form
            ref="form"
            :model="queryParams"
            label-position="top"
            inline
            size="small"
            class="filterform"
          >
            <el-form-item label="" prop="keyword" class="mb-0">
              <el-input
                placeholder="搜企微号"
                v-model="queryParams.keyword"
                @keyup.enter.native="handleQuery"
                class="x-input-select"
              >
                <el-button
                  slot="append"
                  icon="el-icon-search"
                  @click="handleQuery"
                ></el-button>
              </el-input>
            </el-form-item>
            <el-form-item label="" class="mb-0" prop="group">
              <el-select v-model="queryParams.group" filterable placeholder="分组" size="small" style="width:120px">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="" class="mb-0" prop="status">
              <el-select v-model="queryParams.status" filterable placeholder="任务状态" size="small" style="width:120px">
                <el-option
                  v-for="item in statuses"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-form>

          <a class="status-button" @click="onNavigationTo('/hook/add-friend/statistics')" v-hasPermi="['card-add-friend:data']">
            <i class="el-icon-data-analysis"></i>
            <span>数据统计</span>
          </a>
        </div>
        <el-table
          :data="tableData"
          style="width: 100%">
          <el-table-column
            type="selection"
            width="70">
          </el-table-column>
          <el-table-column
            prop="number"
            label="企微号">
            <template slot-scope="scope">
              <div class="company-account">
                <img class="account-cover" src="https://wework.qpic.cn/wwpic/177031_HhrnVYv6QQSgQ2C_1686909054/0" />
                <div class="account-info">
                  <div class="name">闵雨微</div>
                  <div class="desc">@志新</div>
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            prop="task_status"
            label="任务状态"
            >
            <template slot-scope="scope">
              <div class="task-status">
                <span class="round open" />
                <span>开启</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            prop="option"
            label="接受对象"
          >
          <template slot-scope="scope">
            <div class="accept-account">
              <div><strong style="color: rgb(47, 84, 235);">0</strong> 客户</div>
              <div><strong style="color: rgb(47, 84, 235);">0</strong> 企业成员</div>
            </div>
          </template>
          </el-table-column>
          <el-table-column
            prop="option"
            label="每日申请上限"
          >
          </el-table-column>
          <el-table-column
            prop="option"
            label="申请间隔"
          >
          <template slot-scope="scope">
            <div class="apply-lapse">
              5<span style="margin: 0 4px;">~</span>10s
            </div>
          </template>
          </el-table-column>
          <el-table-column
            prop="option"
            label="操作"
            width="280"
          >
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="dialogVisible = true" v-hasPermi="['card-add-friend:addSet']">加好友设置</el-button>
            <el-button type="text" size="small" @click="acceptVisible = true" v-hasPermi="['card-add-friend:objSet']">接受对象设置</el-button>
          </template>
          </el-table-column>
          <template slot="empty">
            <TableEmpty />
          </template>
        </el-table>
      </div>
      <div class="card-add-friend-footer">
        <div class="space-list">
          <div class="space-item">已选：</div>
          <div class="space-item">0</div>
          <div class="space-item" style="color: #3070ff;">全选所有</div>
          <div class="space-item" style="color: #3070ff;">清空已选</div>
        </div>
        <div class="space-list">
          <el-button plain size="small" v-hasPermi="['card-add-friend:batchOpen']">批量开启任务</el-button>
          <el-button plain size="small" v-hasPermi="['card-add-friend:batchClose']">批量关闭任务</el-button>
          <el-button plain size="small" v-hasPermi="['card-add-friend:batchAdd']">批量加好友设置</el-button>
          <el-button plain size="small" v-hasPermi="['card-add-friend:batchObjSet']">批量接受对象设置</el-button>
        </div>
      </div>
    </div>
    <SettingAddFriendDialog :visible="dialogVisible" @handCloseDialog="onHandCloseDialog"/>
    <AcceptFriendDialog :visible="acceptVisible" @handCloseDialog="onHandCloseAcceptDialog" />
  </div>
</template>
<script>
import SettingAddFriendDialog from './components/AddFriendDialog'
import AcceptFriendDialog from './components/AcceptFriendDialog'
export default {
  data() {
    return {
      dialogVisible: true,
      acceptVisible: false,
      queryParams:{
        pageNum:1,
        pageSize:10,
        status:'',
        group:'',
        keyword:''
      },
      options: [{
        value: 1,
        label: '未分组'
      }, {
        value: 2,
        label: '测试分组1'
      }, {
        value: 3,
        label: '测试分组2'
      }],
      tableData: [{id: 1, name: '1111'}],
      statuses: [{
        value: 1,
        label: '开启'
      }, {
        value: 2,
        label: '关闭'
      }],
      existingWindow:''
    }
  },
  components: {
    SettingAddFriendDialog,
    AcceptFriendDialog
  },
  methods: {
    onHandCloseDialog() {
      this.dialogVisible = false
    },
    onHandCloseAcceptDialog() {
      this.acceptVisible = false
    },
    onNavigationTo(path) {
      this.$router.push(path)
    },

    // openOrFocusWindow(url) {
    //   // 通过给窗口命名来检查是否已存在
    //   const windowName = 'myUniqueWindowName';
    //   const existingWindow = window.open('', windowName);
    //   if (existingWindow.location.href === 'about:blank') {
    //     // 如果窗口不存在，或者新打开的窗口未加载任何 URL，则加载指定的 URL
    //     existingWindow.location.href = url;
    //   }
    //   // 使窗口获得焦点
    //   existingWindow.focus();
    // },

    openOrFocusWindow(url) {
      // 检查是否已经存在名为 "myWindow" 的窗口
      // var existingWindow = '';
      // var existingWindow = window.open('', 'myWindow');
      // 如果窗口存在并且未关闭，则聚焦到该窗口
      if (this.existingWindow && !this.existingWindow.closed) {
        this.existingWindow.focus();
      } else {
        // 如果窗口不存在或者已经关闭，则新打开一个窗口
        this.existingWindow = window.open(url, 'myWindow');
      }
    },

    handleOpen(){
      this.openOrFocusWindow('https://qyb.wxb.com/im/chat')
    },
  }
}
</script>
<style lang="scss" scoped>
.card-add-friend-main {
  height: calc(100vh - 48px);
  overflow: auto;
  flex: 1 1;
  position: relative;
  .card-add-friend-head {
    height: 46px;
    background: #fff;
    border-bottom: 1px solid #e9e9e9;
    position: sticky;
    top: 0;
    z-index: 8;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 0 20px;
    .head-title {
      font-size: 14px;
      line-height: 22px;
      .example-text {
        color: #2f54eb;
        cursor: pointer;
        margin-left: 8px;;
        font-weight: 400;
        &:hover + .example-modal {
          display: block;
        }
      }
      .example-modal {
        position: fixed;
        left: 0;
        margin-top: 10px;
        display: none;
        border-radius: 4px;
        box-shadow: 0 2px 8px rgba(0,0,0,.15);
        background: #FFFFFF;
        .example-cover {
          height: 600px;
        }
      }
    }
    .divider {
      margin: 0 20px;
      width: 1px;
      height: 16px;
    }
  }
  .card-add-friend-container {
    padding: 12px;
    font-size: 14px;
    line-height: 22px;
    .config-tips {
      margin-bottom: 12px;
    }
    .table-container {
      .status-button {
        line-height: 1.5715;
        position: relative;
        display: inline-block;
        font-weight: 400;
        white-space: nowrap;
        text-align: center;
        background-image: none;
        box-shadow: unset;
        cursor: pointer;
        transition: all .3s cubic-bezier(.645,.045,.355,1);
        user-select: none;
        touch-action: manipulation;
        height: 32px;
        padding: 4px 15px;
        font-size: 14px;
        border-radius: 4px;
        color: rgba(0, 0, 0, .65);
        border: 1px solid #e9e9e9;
        background: #fff;
          span {
            margin-left: 8px;
          }
      }
      .company-account {
        display: flex;
        align-items: center;
        .account-cover {
          width: 40px;
          height: 40px;
        }
        .account-info {
          margin-left: 8px;
          .name {
            font-size: 14px;
            line-height: 22px;
            color: #222333;
          }
          .desc {
            color: #f08b00;
            line-height: 22px;
          }
        }
        .accept-account {
          font-size: 14px;
          line-height: 22px;
        }
      }
      .task-status {
        display: flex;
        align-items: center;
        font-size: 14px;
        line-height: 22px;
        .round {
          display: block;
          width: 8px;
          height: 8px;
          border-radius: 50%;
          margin-right: 4px;
          &.open {
            background: #52c41a;
          }
        }
      }
    }
  }
  .card-add-friend-footer {
    position: fixed;
    left: 226px;
    right: 0;
    bottom: 0;
    background: #ffffff;
    padding: 16px 12px;
    display: flex;
    align-content: center;
    justify-content: space-between;
    font-size: 14px;
    line-height: 22px;
    .space-list {
      display: flex;
      align-items: center;
      .space-item {
        &:not(:first-child) {
          margin-left: 8px;
        }
      }
    }
  }
}
</style>
